import React, { useEffect, useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { isEmpty } from '@/utils/common';
import { Mask, ModalWrap } from '@/design';
import { useSelector, useDispatch } from 'umi';

import styles from './seatNumModal.less';

// 預定信息
export default function (props: any) {
  const { seatNumVisiable, onClose, onClickSure } = props;
  const { seatNum } = useSelector((state:any) => state.order);
  const dispatch = useDispatch();
  
  const handleSelectSeatNum = (item: number) => {
    dispatch({
      type:'order/saveSeatNum',
      payload: item
    })
  }
  
  // const [seatNum, setSeatNum] = useState<number>(4);
  return (<ModalWrap headName={'就餐人數'} modalVisiable={seatNumVisiable} onClose={onClose} disabled={!seatNum} noPadding={true} onClickSure={onClickSure}>
      <ul className={styles.times_wrap}>
      {Array.from(Array(16), (v: number, k: number) => k + 1).map((item:any, index: number)=>{
        return ( <li className={`${seatNum === item ? styles.active : ''}`} key={`${item}_${index}`} onClick={()=>{handleSelectSeatNum(item)}}>
          <span>{item}位</span>
        </li>)
      })}
    </ul>
  </ModalWrap>
  )
}